<template>
  <div class="home">
    <!-- 运营概况导航栏 -->
    <div class="topBox">
      <div class="left">
        <el-image class="image" :src="require('@/assets/images/work.png')" />
        <div class="title">运营概况 <div class="line"></div>
        </div>
      </div>
      <div class="right">
        <div class="btnBox">
          <span @click.stop.prevent="btn(3, 'queryParams', 'getOperationalOverviewList')" class="dateBtn4"
            :style="queryParams.type == 3 ? 'color:#fff' : 'color:#000'">
            <span @click.stop.prevent="btn(2, 'queryParams', 'getOperationalOverviewList')" class="dateBtn3"
              :style="queryParams.type == 2 ? 'color:#fff' : 'color:#000'">
              <span @click.stop.prevent="btn(1, 'queryParams', 'getOperationalOverviewList')" class="dateBtn2"
                :style="queryParams.type == 1 ? 'color:#fff' : 'color:#000'">
                <span @click.stop.prevent="btn(0, 'queryParams', 'getOperationalOverviewList')" class="dateBtn1"
                  :style="queryParams.type == 0 ? 'color:#fff' : 'color:#000'">
                  昨 日
                </span>
                今 日
              </span>
              本 周
            </span>
            本 月
          </span>
        </div>
        <!-- 日期 -->
        <div>
          <el-date-picker v-model="queryParams.startEndDate" prefix-icon=" " type="daterange" :clearable="false"
            :editable="false" range-separator="—" start-placeholder="开始日期" value-format="yyyy-MM-dd"
            :picker-options="pickerOptions" end-placeholder="结束日期"
            @change="btn($event, 'queryParams', 'getOperationalOverviewList')">
          </el-date-picker>
        </div>
      </div>
    </div>
    <!-- 订餐人数、实际就餐人数、请假人数、退餐人数、退餐金额 :style="'background-image:url(require('./../assets/banner_top2.png'))'"-->
    <div class="box">
      <div class="item"
        :style="{ backgroundImage: 'url(' + require('../../../assets/images/card' + (index + 1) + '.png') + ')' }"
        v-for="(item, index) in operationalOverview" :key="index">
        <div>{{ item.title }}</div>
        <div class="number">{{ item.number }}<span class="text">{{ item.text }}</span></div>
      </div>
    </div>
    <!-- 退费、退款、充值统计 -->
    <div class="box2">
      <!-- 退费统计 -->
      <div class="item">
        <div class="itemTop">
          <div class="leftTitle">
            <el-image class="image" :src="require('@/assets/images/leave.png')" />
            <div class="title">退费统计<div class="line"></div>
            </div>
          </div>
          <div class="rightContent">
            <div>
              <span @click.stop.prevent="btn(3, 'refundQueryParams', 'refundStatistics')" class="dateBtn2"
                :style="refundQueryParams.type == 3 ? 'color:#fff' : 'color:#000'">
                <span @click.stop.prevent="btn(2, 'refundQueryParams', 'refundStatistics')" class="dateBtn1"
                  :style="refundQueryParams.type == 2 ? 'color:#fff' : 'color:#000'">
                  本 周
                </span>
                本 月
              </span>
            </div>
            <div style="cursor: pointer;">
              <el-date-picker v-model="refundQueryParams.startEndDate" prefix-icon=" " type="daterange"
                :clearable="false" :editable="false" range-separator="—" start-placeholder="开始日期"
                value-format="yyyy-MM-dd" end-placeholder="结束日期" :picker-options="pickerOptions"
                @change="btn($event, 'refundQueryParams', 'refundStatistics')">
              </el-date-picker>
            </div>
          </div>
        </div>
        <!-- 退费树状图 -->
        <div id="refundStatistics" style="width: 100%; height: 300px"></div>
      </div>
      <!-- 退款金额统计 -->
      <div class="item">
        <div class="itemTop">
          <div class="leftTitle">
            <el-image class="image" :src="require('@/assets/images/leave.png')" />
            <div class="title">退款金额统计<div class="line"></div>
            </div>
          </div>
          <div class="rightContent">
            <div>
              <span @click.stop.prevent="btn(3, 'refundMoneyQueryParams', 'refund')" class="dateBtn2"
                :style="refundMoneyQueryParams.type == 3 ? 'color:#fff' : 'color:#000'">
                <span @click.stop.prevent="btn(2, 'refundMoneyQueryParams', 'refund')" class="dateBtn1"
                  :style="refundMoneyQueryParams.type == 2 ? 'color:#fff' : 'color:#000'">
                  本 周
                </span>
                本 月
              </span>
            </div>
            <div style="cursor: pointer;">
              <el-date-picker v-model="refundMoneyQueryParams.startEndDate" prefix-icon=" " type="daterange"
                :clearable="false" :editable="false" range-separator="—" start-placeholder="开始日期"
                value-format="yyyy-MM-dd" end-placeholder="结束日期" :picker-options="pickerOptions"
                @change="btn($event, 'refundMoneyQueryParams', 'refund')">
              </el-date-picker>
            </div>
          </div>
        </div>
        <!-- 退款金额折线图 -->
        <div id="refund" style="width: 100%; height: 300px"></div>
      </div>
      <!-- 在线充值统计 -->
      <div class="item">
        <div class="itemTop">
          <div class="leftTitle">
            <el-image class="image" :src="require('@/assets/images/leave.png')" />
            <div class="title">在线充值统计<div class="line"></div>
            </div>
          </div>
          <div class="rightContent">
            <div>
              <span @click.stop.prevent="btn(3, 'rechargeMoneyQueryParams', 'recharge')" class="dateBtn2"
                :style="rechargeMoneyQueryParams.type == 3 ? 'color:#fff' : 'color:#000'">
                <span @click.stop.prevent="btn(2, 'rechargeMoneyQueryParams', 'recharge')" class="dateBtn1"
                  :style="rechargeMoneyQueryParams.type == 2 ? 'color:#fff' : 'color:#000'">
                  本 周
                </span>
                本 月
              </span>
            </div>
            <div style="cursor: pointer;">
              <el-date-picker v-model="rechargeMoneyQueryParams.startEndDate" prefix-icon=" " type="daterange"
                :clearable="false" :editable="false" range-separator="—" :picker-options="pickerOptions"
                start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期"
                @change="btn($event, 'rechargeMoneyQueryParams', 'recharge')">
              </el-date-picker>
            </div>
          </div>
        </div>
        <!-- 充值统计图 -->
        <div id="recharge" style="width: 100%; height: 300px"></div>
      </div>
    </div>
    <!-- 学校订餐情况、请假人员 -->
    <div class="box3">
      <!-- 学校订餐情况 -->
      <div class="left">
        <div class="itemTop">
          <div class="leftTitle">
            <el-image class="image" :src="require('@/assets/images/affair.png')" />
            <div class="title">学校订餐情况统计<div class="line"></div>
            </div>
          </div>
          <div class="rightContent">
            <div>
              <span @click.stop.prevent="btn(3, 'schoolOrderingMealsQueryParams', 'getschoolOrderingMealsList')"
                class="dateBtn2" :style="schoolOrderingMealsQueryParams.type == 3 ? 'color:#fff' : 'color:#000'">
                <span @click.stop.prevent="btn(2, 'schoolOrderingMealsQueryParams', 'getschoolOrderingMealsList')"
                  class="dateBtn1" :style="schoolOrderingMealsQueryParams.type == 2 ? 'color:#fff' : 'color:#000'">
                  本 周
                </span>
                本 月
              </span>
            </div>
            <div style="cursor: pointer;">
              <el-date-picker v-model="schoolOrderingMealsQueryParams.startEndDate" prefix-icon=" " type="daterange"
                :clearable="false" :editable="false" range-separator="—" start-placeholder="开始日期"
                value-format="yyyy-MM-dd" end-placeholder="结束日期" :picker-options="pickerOptions"
                @change="btn($event, 'schoolOrderingMealsQueryParams', 'getschoolOrderingMealsList')">
              </el-date-picker>
            </div>
          </div>
        </div>
        <div>
          <!-- 搜索和导出 -->
          <div class="formBox">
            <div class="input"><el-input v-model="schoolOrderingMealsQueryParams.schoolName" clearable
                :placeholder="placeholder" @clear="getschoolOrderingMealsList" /></div>
            <el-button class="btn" native-type @click="getschoolOrderingMealsList">搜索</el-button>
            <el-button class="btn" native-type @click="handleExport">导出</el-button>
          </div>
          <el-table v-loading="loding" :header-cell-style="rowClass" :data="schoolOrderingMealsList" :max-height="300"
            stripe>
            <el-table-column type="index" align="center" label="序号" />
            <el-table-column :label="label" align="center" prop="schoolName" width="160" />
            <el-table-column label="早餐人数" align="center" prop="breakfast" />
            <el-table-column label="午餐人数" align="center" prop="lunch" />
            <el-table-column label="实际人数(早餐)" width="120" align="center" prop="breakfastNum" />
            <el-table-column label="实际人数(午餐)" width="120" align="center" prop="lunchNum" />
            <el-table-column label="退餐数(早餐)" width="120" align="center" prop="breakfastLeave" />
            <el-table-column label="退餐数(午餐)" width="120" align="center" prop="lunchLeave" />
            <el-table-column label="请假人数" align="center" prop="totalLeave" />
            <el-table-column label="退费金额" align="center" prop="returnMoney" />
          </el-table>
          <div class="pagination">
            <pagination v-show="schoolOrderingMealsTotal > 0" :total="schoolOrderingMealsTotal"
              :page.sync="schoolOrderingMealsQueryParams.pageNum" :limit.sync="schoolOrderingMealsQueryParams.pageSize"
              @pagination="getschoolOrderingMealsList" />
          </div>
        </div>
      </div>
      <!-- 请假人员 -->
      <div class="right">
        <div class="itemTop">
          <div class="leftTitle">
            <el-image class="image" :src="require('@/assets/images/affair.png')" />
            <div class="title">请假人员<div class="line"></div>
            </div>
          </div>
          <div class="rightContent">
            <div style="cursor: pointer;">
              <el-date-picker v-model="leavePeopleQueryParams.startEndDate" prefix-icon=" " type="daterange"
                :clearable="false" :editable="false" range-separator="—" start-placeholder="开始日期"
                :picker-options="pickerOptions" value-format="yyyy-MM-dd" end-placeholder="结束日期" clearable
                @change="leavePeopleBtn">
              </el-date-picker>
            </div>
          </div>
        </div>
        <div style="margin-top: 10px;">
          <el-table v-loading="loding2" :header-cell-style="rowClass" :data="leavesList" :max-height="340" stripe>
            <el-table-column type="index" align="center" label="序号" />
            <el-table-column label="学校" align="center" prop="schoolName" />
            <el-table-column label="班级" align="center" prop="className" width="120" />
            <el-table-column label="姓名" align="center" prop="studentName" />
            <el-table-column label="请假天数" align="center" prop="leaveDays" />
            <el-table-column label="请假时间" align="center" prop="leaveTime" width="160" />
          </el-table>

          <div class="pagination">
            <pagination v-show="leavesListTotal > 0" :total="leavesListTotal"
              :page.sync="leavePeopleQueryParams.pageNum" :limit.sync="leavePeopleQueryParams.pageSize"
              @pagination="getleavePeopleList" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { OperationalOverviewList, leavePeopleList, schoolOrderingMealsList, onLineRechargeList, returnPeople, returnMoney } from "@/api/financialManagement/financialOverview.js"
import * as echarts from 'echarts';

export default {
  data () {
    return {
      loding: true,
      // 请假人员总条数
      leavesListTotal: 0,
      //请假人员列表
      leavesList: [],
      loding2: true,
      //学校订餐情况列表
      schoolOrderingMealsList: [],
      label: "年级",
      placeholder: "请输入年级的名称",
      loding: true,
      //学校订餐情况总条数
      schoolOrderingMealsTotal: 0,
      //订餐人数、实际就餐人数、请假人数、退餐人数、退餐金额
      operationalOverview: [],
      // 运营概况参数
      queryParams: {
        type: 1,
        startDate: null,
        endDate: null,
        startEndDate: "",
      },

      //退费统计参数
      refundQueryParams: {
        type: 2,
        startDate: null,
        endDate: null,
        startEndDate: ""
      },
      // 退款金额统计参数
      refundMoneyQueryParams: {
        type: 2,
        startDate: null,
        endDate: null,
        startEndDate: ""
      },
      // 在线充值统计参数
      rechargeMoneyQueryParams: {
        type: 2,
        startDate: null,
        endDate: null,
        startEndDate: ""
      },
      // 请假人员参数
      leavePeopleQueryParams: {
        pageNum: 1,
        pageSize: 10,
        startDate: null,
        endDate: null,
        startEndDate: ""
      },
      // 学校订餐情况统计参数
      schoolOrderingMealsQueryParams: {
        pageNum: 1,
        pageSize: 10,
        startDate: null,
        endDate: null,
        type: 2,
        startEndDate: "",
        schoolName: ""
      },
      pickerOptions: {
        disabledDate (time) {
          // let secondNum = 60 * 60 * 24 * 10 * 1000; // 时间跨度为7天【一年以365天的时间计算】的限制
          // return time.getTime()>Date.now() || time.getTime() < Date.now() - secondNum;
          return time.getTime() > Date.now()
        },
      }
    }
  },
  mounted () {
    this.refundStatistics()
    this.refund()
    this.recharge()
  },
  created () {
    this.getOperationalOverviewList()
    this.getleavePeopleList()
    this.getschoolOrderingMealsList()
  },
  methods: {
    //学校订餐情况统计参数
    async getschoolOrderingMealsList () {
      this.loding = true
      let res = await schoolOrderingMealsList(this.schoolOrderingMealsQueryParams)
      if (res.rows.length != 0) {
        if (res.rows[0].type) {
          this.label = "学校名称",
            this.placeholder = "请输入学校名称"
        }
      }
      this.schoolOrderingMealsTotal = res.total
      this.schoolOrderingMealsList = res.rows
      this.loding = false
    },
    //请假人员
    async getleavePeopleList () {
      this.loding2 = true
      let res = await leavePeopleList(this.leavePeopleQueryParams)
      this.leavesListTotal = res.total
      res.rows.forEach(v => {
        v.leaveTime = v.leaveTime.replace("~", " ")
      });
      this.leavesList = res.rows
      this.loding2 = false
    },
    //运营概况
    async getOperationalOverviewList () {
      let res = await OperationalOverviewList(this.queryParams)
      let data = res.data
      this.operationalOverview = [
        {
          title: "订餐人数",
          number: data.mealLeaves,
          text: "人"
        },
        {
          title: "实际就餐人数",
          number: data.diningLeaves,
          text: "人"
        },
        {
          title: "请假人数",
          number: data.totalLeaves,
          text: "人"
        },
        {
          title: "退餐人数",
          number: data.refunded,
          text: "人"
        },
        {
          title: "退餐金额",
          number: data.refundedMoney,
          text: "元"
        }
      ]
    },
    // 请假人员日期选择
    leavePeopleBtn (event) {
      if (event) {
        this.leavePeopleQueryParams.startDate = event[0]
        this.leavePeopleQueryParams.endDate = event[1]
      } else {
        this.leavePeopleQueryParams.startEndDate = ""
        this.leavePeopleQueryParams.startDate = null
        this.leavePeopleQueryParams.endDate = null
      }
      this.getleavePeopleList()
    },
    //选择  运营概况、学校订餐情况统计、在线充值统计、退款金额统计、退费统计
    btn (type, name, fun) {
      // type=0昨天1今天2本周3本月，其他是日期
      // name=请求参数名
      // fun=方法名
      if (type == 0 || type == 1 || type == 2 || type == 3) {
        this[name].startEndDate = ""
        this[name].startDate = null
        this[name].endDate = null
        this[name].type = type
      } else {
        this[name].type = 4
        this[name].startDate = type[0]
        this[name].endDate = type[1]
      }
      this[fun]()
    },
    //设置table标题样式
    rowClass ({ row, rowIndex }) {
      return 'background:#FFCE80'
    },
    //退费统计
    async refundStatistics () {
      let res = await returnPeople(this.refundQueryParams)
      let data=res.data
      // 使用echarts的提供的方法进行判读dom是否已被初始化 getInstanceByDom()
      let myChart = echarts.getInstanceByDom(document.getElementById('refundStatistics'));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById('refundStatistics'));
      }
      var option;
      var series = [
        {
          name: "早餐",
          data: data.values,
          type: 'bar',
          itemStyle: {
            borderRadius: [20, 20, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#4EA0FF' },
              { offset: 1, color: '#0073FE' }
            ])
          }
        },
        {
          name: "午餐",
          data: data.values2,
          type: 'bar',
          itemStyle: {
            borderRadius: [20, 20, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#FF9B00' },
              { offset: 1, color: '#FC5800' }
            ])
          }
        },
      ];
      option = {
        xAxis: {
          type: 'category',
          data: data.labels
        },
        yAxis: {
          type: 'value',
          name: "退费人数",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter:(params)=> {
            let result = params[0].axisValue + "<br/>"
            params.forEach(item=> {
              result += item.marker + item.seriesName + "退费：" + item.data + "人" + "<br/>"
            })
            return result
          }
        },
        legend: {},
        series: series
      };

      option && myChart.setOption(option);

    },
    // 退款金额统计
    async refund () {
      let res = await returnMoney(this.refundMoneyQueryParams)
      let data=res.data
      // 使用echarts的提供的方法进行判读dom是否已被初始化 getInstanceByDom()
      let myChart = echarts.getInstanceByDom(document.getElementById('refund'));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById('refund'));
      }
      // var myChart = echarts.init(document.getElementById('refund'));
      var option;

      option = {
        legend: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter:(params)=> {
            let result = params[0].axisValue + "<br/>"
            params.forEach(item=> {
              result += item.marker + item.seriesName + "退款：" + item.data + "元" + "<br/>"
            })
            return result
          }
        },

        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: data.labels
        },
        yAxis: {
          type: 'value',
          name: "退款金额",
        },
        series: [
          {
            name: "早餐",
            data: data.values,
            type: 'line',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#D2E6FF' },
                { offset: 1, color: '#fff' }
              ])
            }
          },
          {
            name: "午餐",
            data: data.values2,
            type: 'line',
            color: "#FD3F2E",
            lineStyle: {
              color: "#FD3F2E"
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //充值统计
    async recharge () {
      let res = await onLineRechargeList(this.rechargeMoneyQueryParams)
      // 使用echarts的提供的方法进行判读dom是否已被初始化 getInstanceByDom()
      let myChart = echarts.getInstanceByDom(document.getElementById('recharge'));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById('recharge'));
      }
      // let newValues=[]
      // res.data.values.forEach(v=>{
      //   newValues.push(v+"元")
      // })
      let data = res.data
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter:(params)=> {
            let result = params[0].axisValue + "<br/>"
            params.forEach(item=> {
              result += item.marker + item.seriesName + "：" + item.data + "元" + "<br/>"
            })
            return result
          }
        },
        xAxis: {
          type: 'category',
          data: data.labels
        },
        yAxis: {
          type: 'value',
          name: "充值金额"
        },
        series: [
          {
            name: "充值金额",
            data: data.values,
            type: 'line',
            color: "#27BE4E",
            areaStyle: {
              color: "#D7FCEC",
            }
          }
        ]
      };

      option && myChart.setOption(option);

    },
    /** 导出按钮操作 */
    handleExport () {
      this.download('/financialOverview/export', {
        ...this.schoolOrderingMealsQueryParams
      }, `学校订餐情况${new Date().getTime()}.xlsx`)
    },
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

//默认所有图标图片大小
.image {
  width: 24px;
  height: 23px;
}

.home {
  padding: 10px 34px;
  box-sizing: border-box;
  background-color: #F1F2F6;
  overflow: auto;
}

//运营概况导航栏
.topBox {
  // width: 1602px;
  width: 98%;
  height: 65px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  padding: 0 30px 0 10px;
  box-sizing: border-box;
  background-color: #fff;

  .left {
    display: flex;

    .title {
      width: 68px;
      margin-left: 10px;
      position: relative;
      z-index: 0;

      .line {
        position: absolute;
        top: 15px;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 7px;
        border-radius: 5px;
        background-color: #FFCE80;
      }
    }
  }

  .right {
    display: flex;
    align-items: center;

    .btnBox {
      border-radius: 10px;
      width: 170px;
      font-size: 12px;

      .dateBtn4 {
        padding: 5px 10px;
        padding-left: 0;
        background-color: #FFF8DF;
        border-radius: 15px;
        cursor: pointer;

        .dateBtn3 {
          padding: 5px 10px;
          padding-left: 0;
          background-color: #FFCE80;
          border-radius: 15px;
          cursor: pointer;

          .dateBtn2 {
            padding: 5px 10px;
            padding-left: 0;
            background-color: #FFB847;
            border-radius: 15px;
            cursor: pointer;

            .dateBtn1 {
              padding: 5px 10px;
              background-color: #FFA20D;
              border-radius: 15px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

//订餐人数、实际就餐人数、请假人数、退餐人数、退餐金额
.box {
  // width: 1602px;
  width: 98%;
  margin: 0 auto;
  color: #fff;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 20px;

  .item {
    // width: 280px;
    width: 19%;
    height: 150px;
    padding: 10px 20px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    overflow: hidden;

    .number {
      margin: 20px 0 0;
      font-size: 32px;
      word-wrap: break-word;
      // position: relative;

      // .text {
      // position: absolute;
      // bottom: -20px;

      // margin-top: 40px;
      // box-sizing: border-box;
      // }
    }
  }
}

// 退费、退款、充值统计
.box2 {
  // width: 1602px;
  width: 98%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;

  .item {
    width: 33%;
    height: 326px;
    background-color: #fff;
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;

    .itemTop {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;

      .leftTitle {
        display: flex;
        align-items: center;

        .title {
          margin-left: 10px;
          position: relative;
          z-index: 0;

          .line {
            position: absolute;
            top: 15px;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 7px;
            border-radius: 5px;
            background-color: #FFCE80;
          }
        }
      }

      .rightContent {
        display: flex;
        align-items: center;
        font-size: 12px;

        .dateBtn2 {
          padding: 5px 10px;
          padding-left: 0;
          background-color: #FFF8DF;
          border-radius: 15px;
          cursor: pointer;

          .dateBtn1 {
            padding: 5px 10px;
            background-color: #FFA20D;
            border-radius: 15px;
            cursor: pointer;
          }
        }
      }
    }

  }
}

.box3 {
  // width: 1602px;
  width: 98%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  .left {
    background-color: #fff;
    // width: 1060px;
    width: 59%;
    height: 100%;
    min-height: 440px;
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;

    .itemTop {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .leftTitle {
        display: flex;
        align-items: center;

        .title {
          margin-left: 10px;
          position: relative;
          z-index: 0;

          .line {
            position: absolute;
            top: 15px;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 7px;
            border-radius: 5px;
            background-color: #FFCE80;
          }
        }
      }

      .rightContent {
        display: flex;
        align-items: center;
        font-size: 12px;

        .dateBtn2 {
          padding: 5px 10px;
          padding-left: 0;
          background-color: #FFF8DF;
          border-radius: 15px;
          cursor: pointer;

          .dateBtn1 {
            padding: 5px 10px;
            background-color: #FFA20D;
            border-radius: 15px;
            cursor: pointer;
          }
        }
      }
    }

    // 搜索和导出
    .formBox {
      display: flex;
      margin: 0 0 10px 30px;

      .input {
        background-color: #FFE2B3;
        width: 160px;
        border-radius: 20px;
        margin-right: 10px;

        ::v-deep .el-input__inner {
          background-color: #FFE2B3;
          border-radius: 20px;
        }

        ::v-deep .el-input__inner::placeholder {
          color: #757575;
        }

        ::v-deep .el-input .el-input__suffix {
          .el-input__suffix-inner {
            .el-icon-circle-close.el-input__clear {
              font-size: 15px;
              color: #606266;
            }
          }
        }
      }

      .btn {
        background-color: #FFCE80;
        padding: 0 10px;
        color: #606266;

      }
    }
  }

  .right {
    // width: 519px;
    width: 40%;
    height: 100%;
    min-height: 440px;
    background-color: #fff;
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;

    .itemTop {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .leftTitle {
        display: flex;
        align-items: center;

        .title {
          margin-left: 10px;
          position: relative;
          z-index: 0;

          .line {
            position: absolute;
            top: 15px;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 7px;
            border-radius: 5px;
            background-color: #FFCE80;
          }
        }
      }

      .rightContent {
        display: flex;
        align-items: center;
        font-size: 12px;
      }
    }
  }
}

::v-deep.el-date-editor .el-range-input {
  cursor: pointer;
}

::v-deep.el-range-editor.el-input__inner {
  padding: 0;
}

::v-deep.el-date-editor--daterange.el-input__inner {
  width: 204px;
  cursor: pointer;
}

::v-deep .el-input__inner {
  cursor: pointer;
  border: none;
}

.pagination {
  ::v-deep .el-input__inner {
    cursor: pointer;
    border: 1px solid #eee;
  }
}

// 修改斑马纹颜色
::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #FFE2B3;
}
</style>